import { Button, Tooltip } from 'antd';

import { ColumnProps } from 'antd/lib/table';
import React from 'react';
import moment from 'moment';
import {
  getColumnSearchProps,
  initTabWidth,
  getElliStyleElement,
} from '@/pages/finance/withdraw/utils';
import { checkPermission } from '@/utils/resolvePermission';

interface StateType {
  [propName: string]: any;
}
export const getColumns = (self: any) => {
  const withdrawStatusMap = {
    0: '待出款',
    7: '自动出款失败',
  };
  const userTypeMap = {
    0: '会员',
    1: '代理',
  };
  const withdrawTypeMap = {
    0: '人工打款',
    1: '自动出款',
    2: '三方手动出款',
  };
  const formData = (obj: any) =>
    Object.keys(obj).map(key => ({
      text: obj[key],
      value: key,
    }));
  const columns: ColumnProps<StateType>[] = [
    {
      title: '提现时间',
      dataIndex: 'createDate',
      render: time => time && <span>{moment(time).format('YY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '提现单号',
      dataIndex: 'orderId',
    },
    {
      title: '出款金额',
      dataIndex: 'amount',
    },
    {
      title: '账户名',
      dataIndex: 'username',
      ...getColumnSearchProps('username', self, '请输入账户名'),
    },
    {
      title: '账户类型',
      dataIndex: 'userType',
      filters: formData(userTypeMap),
      filterMultiple: false, // 是否多选
      render: key => <span>{userTypeMap[key]}</span>,
    },
    {
      title: '出款方式',
      dataIndex: 'withdrawType',
      filters: formData(withdrawTypeMap),
      filterMultiple: false, // 是否多选
      render: key => <span>{withdrawTypeMap[key]}</span>,
    },
    {
      title: '提现银行',
      dataIndex: 'bankName',
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      render: key => <span>{withdrawStatusMap[key]}</span>,
      filters: formData(withdrawStatusMap),
      filterMultiple: false, // 是否多选
    },
    {
      title: '备注',
      dataIndex: 'remark',
      render: remark => getElliStyleElement(remark, 130),
    },
    {
      title: '分单状态',
      dataIndex: 'isSeparate',
      render: isSeparate => <span>{isSeparate ? '已分单' : '未分单'}</span>,
    },
    {
      title: '分单给',
      dataIndex: 'seperator',
      ...getColumnSearchProps('seperator', self),
    },
    {
      title: '未分单原因',
      dataIndex: 'seperateReason',
    },
    {
      title: '分单时间',
      dataIndex: 'seperateDate',
      render: time => time && <span>{moment(time).format('YY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      render: (text: any, rowData: any) => {
        const disabled =
          rowData.status === 5 ||
          rowData.status === 7 ||
          rowData.status === 9 ||
          rowData.status === 0;
        const sign1 = rowData.status === 7 || rowData.status === 10;
        const sign2 = rowData.status === 10;
        const sign3 =
          (rowData.status !== 1 || rowData.status !== 3 || rowData.status !== 6) &&
          !rowData.isSeparate;

        return (
          <span>
            {rowData.isSeparate &&
              (checkPermission(self.props.btns, 'new-finance-withdraw-separate-recovery') ? (
                <Button
                  type="primary"
                  disabled={!disabled}
                  onClick={() => self.showRecoveryModal(rowData, 'radio')}
                >
                  回收
                </Button>
              ) : (
                ''
              ))}

            {sign3 &&
              (checkPermission(self.props.btns, 'new-finance-withdraw-separate-do') ? (
                <Button
                  type="primary"
                  disabled={!disabled}
                  onClick={() => self.showSeperateModal(rowData, 'radio')}
                >
                  分单
                </Button>
              ) : (
                ''
              ))}

            {sign1 &&
              (checkPermission(self.props.btns, 'new-finance-withdraw-separate-force-success') ? (
                <Button
                  type="primary"
                  style={{ marginLeft: 5 }}
                  onClick={() => {
                    self.saveForceSuccess(rowData);
                  }}
                >
                  强制成功
                </Button>
              ) : (
                ''
              ))}

            {sign1 &&
              (checkPermission(self.props.btns, 'new-finance-withdraw-separate-back-balance') ? (
                <Button
                  type="primary"
                  style={{ marginLeft: 5 }}
                  onClick={() => {
                    self.saveWithdrawReturn(rowData);
                  }}
                >
                  退回余额
                </Button>
              ) : (
                ''
              ))}

            {sign2 &&
              (checkPermission(self.props.btns, 'new-finance-withdraw-verify-order-status') ? (
                <Button
                  type="primary"
                  style={{ marginLeft: 5 }}
                  onClick={() => {
                    self.withdrawStatusConfim(rowData);
                  }}
                >
                  验证状态
                </Button>
              ) : (
                ''
              ))}
          </span>
        );
      },
    },
  ];
  initTabWidth(columns);
  return columns;
};
